@extends('layout.home')

@section('title','订单确认')

@section('content')
	<style type="text/css">
		.address{
			/*background:coral;*/
			/*color: blue;*/
			margin-bottom:20px;
			margin-left:20px;
			border:solid 1px #ddd;
			height:160px;
			padding:10px;
			font-size:15px;
			line-height:33px;
			position:relative;
			cursor:pointer;
		}
		.active{
			border:dashed 2px royalblue;
			color:royalblue;
		}
		.gou{
			width:15px;
			height:15px;
			background:royalblue;
			color:white;
			position:absolute;
			right:0px;
			top:0px;
			line-height:10px;
			text-align:center;
		}
	</style>
	
	<div class="container" style="margin-top:30px">
	<!-- <div style="margin-left:20px;border:solid 2px #aaa;width:50px;">地址:</div> -->
		<div class="col-md-2">
			<h2>收货地址<h2><a style="font-size:14px" href="/home/address/add">添加新地址</a>
		</div>
		<div class="col-md-10 col-md-offset-0 ">
			@foreach($addr as $k=>$v)
			<div class="col-lg-3 col-md-4 address" addr="{{$v->id}}">
				<ul class="ul list-unstyled">
					<li>收货人: {{$v->consignee}}</li>
					<li>联系方式: {{$v->phone}}</li>
					<li>地址: {{getAreaNameById($v->prov)}}省 {{getAreaNameById($v->city)}} {{getAreaNameById($v->county)}} {{$v->detail}}</li>
				</ul>
			</div>
			@endforeach
		</div>
		<div class="clearfix"></div>
		<div class="col-md-12">
		</div>
		<div class="clearfix"></div>
		<div class="col-md-2" style="margin-top:30px">
			<h2>支付方式</h2>
		</div>
		<div class="col-md-10" style="margin-top:33px">
			<form action="/home/order/doconfirm" method="post">
				<div class="col-md-12">
					支付宝<input name="pay_type" value="zhifubao" type="radio"><span style="display:inline-block;width:30px"></span>
					微信支付<input name="pay_type" value="weixin" type="radio"><span style="display:inline-block;width:30px"></span>
					highpay<input name="pay_type" value="highpay" type="radio">
				</div>
				<div class="col-md-2 col-md-offset-8" >
					{{csrf_field()}}
					<input type="hidden" name="address_id" value="">
					<input type="hidden" name="order_id" value="{{$order_id}}">
					<button class="btn btn-lg btn-success">确认提交订单</button>
				</div>
			</form>
		</div>
	</div>
	<script type="text/javascript">
		$(function(){
			$('.address').click(function(){
				// alert(111);
				//修改样式
				$('.address').removeClass('active');
				$(this).addClass('active');
				//添加右上角的√
				var gou = $('<div class="gou"><b>√</b></div>');
				$('.address').find('.gou').remove();
				$(this).append(gou);
				//向隐藏域中添加 地址id
				var address_id = $(this).attr('addr');
				$('input[name=address_id]').val(address_id);
				// alert(address_id);
			});
		});
	</script>
@endsection